<template>
  <el-card style="margin-bottom:20px;background: #f5f7fa" v-loading="listLoading">
    <div slot="header" class="custom-card-header">
      <svg-icon icon-class="location" /><span style="padding-left: 5px;color: #a6a9ad">全部区域</span>
    </div>
    <div class="user-profile">
      <el-tree
        style="background: #f5f7fa"
        :data="areas"
        :props="listProps"
        :default-expand-all="false"
        :icon-class="icon"
        @node-click="handleNodeClick">

      </el-tree>
    </div>
  </el-card>
</template>

<script>

export default {
  data() {
    return {
      icon:'el-icon-folder',
      // areas:[],
      listLoading:false,
      listProps: {
        children: 'nodes',
        label: 'name'
      }
    }
  },
  props: {
    areas: {type:Array, default: []},
    areaType: {type:Number, default: 0},
    disable:{type:Boolean,default: false}
    }, //0 行政区域 1 小区 2 楼栋
  created() {
    this.getList()
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('handleNodeClick',data)
    },
    getList() {
      this.listLoading = true
      // getAreaTree({type:this.areaType}).then(response => {
      //   this.areas = response.data
      //   setTimeout(() => {
      //     this.listLoading = false
      //   }, 1.5 * 1000)
      // })
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    },
    reload(){
      this.getList()
    }
  }
};
</script>

<style >
.el-tree-node.is-current > .el-tree-node__content {

  background-color: #409EFF !important;
  color: white!important;
}

.custom-card-header {
  height: 10px;
  line-height: 10px; /* 垂直居中 */
  font-size: 15px; /* 设置字体大小 */
  font-weight: bold; /* 加粗字体 */
}

/* 确保 header 内部元素不被其他样式影响 */
.custom-card-header span {
  display: inline-block;
  vertical-align: middle; /* 垂直居中 */
}
 </style>
